<template>
  <div class="all bg-slate-300 px-4 pt-3">
    <div
      class="rounded-lg my-2 bg-white p-4 cursor-pointer hover:bg-slate-200"
      v-for="blog in blogList"
      :key="blog.id"
      @click="toDetail(blog)"
    >
      <div class="text-black font-bold text-2xl">
        {{ blog.blog_title }}
      </div>
      <div class="preContent-conatiner text-xl my-1">
        {{ blog.blog_previewcontent }}
      </div>
      <div class="flex">
        发布博客 {{ moment(new Date(blog.blog_publishtime)).format('YYYY-MM-DD HH:mm:ss') }} 阅读 {{ blog.blog_viewcount }} 点赞
        {{ blog.blog_liked }} 评论 {{ blog.blog_comment }}
      </div>
    </div>
  </div> 
</template>

<script setup>
import { postFindBlogListPage } from "@/api/blog.js";
import moment from 'moment';
const { default: router }=require("@/router");
const { reactive, ref } = require("@vue/reactivity");
const { onMounted }=require("@vue/runtime-core");


const blogList = ref([]);

const toDetail = function(item){
    router.push(`/blogDetail/${item.id}`)
}
onMounted(()=>{
  let params = {
    currentPage: 1,
    pageSize: 10,
  }
  
  postFindBlogListPage(params).then(res=>{
    blogList.value = res.list
  })
})

</script>

<style scoped>
.preContent-conatiner {
  /**适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；**/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>